<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
    <style>
        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateX(150px);
        }

        .v-enter-active, v-leave-active {
            transition: all 2.5s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <!--vue提供的组件component,必须使用单引号，否则报错-->
    <component :is="'logon'"></component>
    {{msg}}
    <input type="text" v-model="msg"/>
    <!-- 父标签的属性可以直接使用  -->
    <logon title="这是title"></logon>
    <my-com2></my-com2>
    <comment :is="'my-com'"></comment>
    <br/>
    子组件传父组件的值：{{valueTransferFromTheSubassembly}}
    <br/>
    <!--组件的切换,必须用单引号引起来-->
    <a href="#" @click.prevent="componentName='logon'">登录</a>
    <a href="#" @click.prevent="componentName='register'">注册</a>
    <!--通过mode属性实现组件切换的方式，要等待动画完毕-->
    <!--mode="out-in"-->
    <transition mode="out-in">
        <comment :is="componentName"></comment>
    </transition>
    <!--通过v-bind 自定义属性传递到子组件内部去，要使用必须要在props属性中定义,这是数组,都是通过props 传值给子组件的,props的值都是只读的
重名的话以父组件为主.
v-on 传递方法,事件传递
    -->
    <br/>
    <input type="button" @click="childClickMethod" value="触发子组件的方法"/>
    <br/>
    <mycomponet ref="childComponet" v-bind:parentmsg="msg" @myshow="show">
        <div><h2>测试slot</h2></div>
    </mycomponet>
</div>
<template id="temp1">
    <div>
        <slot></slot>
        <h5>这是子组件</h5>
        字组件中父组件的值:{{parentmsg}}
        <br/>
        子组件中的值：{{msg}}
        <br/>
        <slot></slot>
        <input type="text" v-model="msg"/>
        <input type="button" @click="myClick" value="像父组件传值"/>
    </div>
</template>
<script>
    Vue.component('logon', {
        template: '<h4>这是登录组件！</h4>'
    });
    Vue.component('register', {
        template: '<h4>这是注册组件！</h4>'
    });

    var con1 = Vue.extend({
        template: '<h3>使用Vue.extend创建组件</h3>'
    });
    //注册可以使用驼峰，使用是时候可以用杠my-com
    Vue.component('myCom', con1);
    Vue.component('myCom2', {
        template: '<h3>使用标签创建组件{{msg}}</h3>',
        data: function () {
            return {msg: '这是组件的数据'}
        },
        methods: {}
    });

    new Vue({
        el: "#app",
        data: {
            msg: '说明',
            componentName: '',
            parentMsg: '父组件的值',
            valueTransferFromTheSubassembly: ''

        },
        methods: {
            show: function (param = '') {
                //param是子组件往父组件传递的数据
                this.valueTransferFromTheSubassembly = `${param}`;
            },
            childClickMethod: function () {
                debugger
                this.$refs.childComponet.childClick();
            }
        },
        components: {
            //父组件通过props方式传值给子组件
            mycomponet: {
                data: function () {
                    return {msg: '这是子组件中的msg', parentmsg: null}
                },
                template: '#temp1',
                props: ['parentmsg'],
                methods: {
                    myClick: function () {
                        //这父组件的方法，通过第二个参数传递参数
                        this.$emit('myshow', this.msg)
                    }, childClick: function () {
                        debugger
                        console.log(`${this.msg} 这是子组件的方法`);
                    }

                }
            }
        }
    });
</script>

</body>
</html>
